<template>
  <view class="person-add">
    <image
      src="../../static/image/business/img_enterprist_agent_add_1.png"
      mode="widthFix"
      class="person-add__top"
    >
    </image>
    <view class="person-add__tip">请提供法人代表的身份证照片和信息</view>
    <u-form :model="form" ref="uForm" class="person-add__form">
      <u-form-item label="经营地区" label-width="200rpx" class="ml-20 mr-20">
        <city :text="cityTip" @success="selectCity"></city>
      </u-form-item>
      <u-form-item label="详细地址" label-width="200rpx" class="ml-20 mr-20"
        ><u-input v-model="form.businessAddress" placeholder="详细地址"
      /></u-form-item>

      <view class="person-add__tip">上传身份证照片(请保持照片清晰完整)</view>
      <view class="flex justify-between ml-20 mr-20">
        <view class="">
          <DeliverFileUpload
            :maxCount="1"
            :width="300"
            @success="onCardSuccess"
            @remove="onRemove"
          >
          </DeliverFileUpload>
          <view class=""> 法人代表身份证照人像面 </view>
        </view>

        <view class="">
          <DeliverFileUpload
            :maxCount="1"
            :width="300"
            @success="onSuccess"
            @remove="onRemove"
          >
          </DeliverFileUpload>
          <view class=""> 法人代表身份证照国徽面 </view>
        </view>
      </view>
      <u-form-item label="姓名" label-width="200rpx" class="ml-20 mr-20"
        ><u-input
          v-model="form.legalName"
          placeholder="自动识别证件照或手动输入"
      /></u-form-item>
      <u-form-item label="身份证" label-width="200rpx" class="ml-20 mr-20"
        ><u-input
          v-model="form.legalIdCardNo"
          placeholder="自动识别证件照或手动输入"
      /></u-form-item>
      <u-form-item
        label="身份证有效期"
        label-width="200rpx"
        class="ml-20 mr-20"
      >
        <u-radio-group v-model="radio" class="person-add__date-group">
          <u-radio key="1" name="有效期" :disabled="false">
            有效期
            <view class="person-add__end-date"
              ><u-input
                v-model="form.legalIdCardValidity"
                type="select"
                placeholder="结束时间"
                @click="showDate = true"
              />
              <u-picker
                mode="time"
                v-model="showDate"
                :params="dateParams"
                @confirm="checkDeadDate"
              ></u-picker>
            </view>
          </u-radio>
          <u-radio key="2" name="永久长期"> 长期 </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="联系人手机号" label-width="200rpx" class="ml-20 mr-20"
        ><u-input
          v-model="form.contactsMobilePhone"
          placeholder="作为登录手机号,请慎重填写"
      /></u-form-item>
    </u-form>
    <u-button
      class="m-20"
      type="primary"
      :custom-style="customStyle"
      @click="nextStep()"
      >下一步</u-button
    >
  </view>
</template>

<script>
import city from '@/components/city/city.vue';
import DeliverFileUpload from '@/components/DeliverFileUpload/DeliverFileUpload.vue';
export default {
  components: {
    city,
    DeliverFileUpload,
  },
  data() {
    return {
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
      },
      cityTip: '省/市/区',
      showCity: false,
      showDate: false,
      dateParams: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      form: {
        agentName: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        businessAddress: '',
        legalIdCardValidity: '', //永久传0
        idCardFaceImg: '', //人像
        idCardNationalEmblemImg: '',
        legalName: '', //个人:负责人姓名.企业:法人姓名
        legalIdCardNo: '',
        contactsMobilePhone: '',
      },
      fileList: [],
      radio: '有效期',
      ocrParam: {
        path: '',
        ocrType: 'ID_CARD_FRONT',
      },
    };
  },
  methods: {
    selectCity(Object) {
      console.log('Object=' + JSON.stringify(Object));
      this.form.provinceCode = Object.accountProvince;
      this.form.cityCode = Object.accountCity;
      this.form.areaCode = Object.accountArea;
    },
    checkDeadDate(e) {
      console.log('e=' + JSON.stringify(e));
      this.form.legalIdCardValidity = e.year + e.month + e.day;
    },
    onRemove(index) {
      this.fileList.splice(index, 1);
    },
    onSuccess(filePath) {
      this.fileList.push(filePath);
      this.form.idCardNationalEmblemImg = filePath;
    },
    onCardSuccess(filePath) {
      this.fileList.push(filePath);
      this.form.idCardFaceImg = filePath;
      //0cr接口
      this.getOcrRead(filePath);
    },
    getOcrRead(filePath) {
      const _that = this;
      _that.ocrParam.path = filePath;
      this.$zx.common_api.getOCRRead(this.ocrParam).then((data) => {
        console.log('getOCRRead----->168', data.words_result);
        if (data.words_result) {
          _that.form.legalName = data.words_result.姓名.words;
          _that.form.legalIdCardNo = data.words_result.公民身份号码.words;
        }
      });
    },
    nextStep() {
      const _that = this;
      if (!_that.form.provinceCode) {
        uni.$zx.msg('请选择经营地区', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.businessAddress) {
        uni.$zx.msg('请输入详细地址', {
          duration: 4000,
        });
        return;
      }
      if (_that.fileList.length < 2) {
        uni.$zx.msg('请上传身份证照片', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.legalName) {
        uni.$zx.msg('请输入姓名', {
          duration: 4000,
        });
        return;
      }
      if (!_that.form.legalIdCardNo) {
        uni.$zx.msg('请输入身份证号', {
          duration: 4000,
        });
        return;
      }
      if (!_that.radio == '有效期') {
        if (!_that.form.legalIdCardValidity) {
          uni.$zx.msg('请选择身份证有效期', {
            duration: 4000,
          });
          return;
        }
      } else {
        _that.form.legalIdCardValidity = '0';
      }
      if (!_that.form.contactsMobilePhone) {
        uni.$zx.msg('请输入联系人手机号', {
          duration: 4000,
        });
        return;
      }
      console.log('param=223' + JSON.stringify(_that.form));
      this.$u.route({
        url: 'pages/business/addCompanySecond',
        params: {
          // basicForm: encodeURIComponent(JSON.stringify(_that.form)),
          basicForm: JSON.stringify(_that.form),
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.person-add {
  &__top {
    width: 100%;
  }

  &__tip {
    background-color: #f6f6f6;
    height: 70rpx;
    line-height: 70rpx;
    padding: 0 20rpx;
    font-size: 12px;
  }

  &__form {
    background-color: white;
  }

  &__date-group {
    display: flex;
    flex-direction: column;
  }

  &__end-date {
    width: 200rpx;
    margin-left: 20rpx;
    display: inline-block;
  }
}
</style>
